<template>
  <div>
    <BKMapDrawer
      position="right"
      bottom="6"
      top="6"
      :z-index="65"
      width="550"
      :menus="menus"
      item-class="custom-menu-item"
      active-item-class="custom-active-menu-item"
      @expandChange="expand = $event"
    >
      <div class="drawer-content d-flex-c">
        <el-tabs
          v-model="currentTab"
          class="tabs"
        >
          <el-tab-pane
            name="standard"
            label="标准历时点雨量"
          >
            <StandardTabPanel @changeStateInStandard="changeStateInStandard" />
          </el-tab-pane>
          <el-tab-pane
            name="custom"
            label="任一历时点雨量"
          >
            <CustomTabPanel />
          </el-tab-pane>
          <el-tab-pane
            name="area"
            label="面雨量"
          >
            <AreaTabPanel />
          </el-tab-pane>
        </el-tabs>
      </div>
      <SearchStation
        class="follower-top"
        :expand="expand"
      />
      <Legend
        class="follower-bottom"
        :list="legends"
        content-width="190px"
      />
    </BKMapDrawer>
    <OperationPanel
      ref="panel"
      class="panel-position"
      placement="bottom-start"
      :has-map-mode="false"
      has-stage
      @currentStageChange="currentStageChange"
    />
    <PointerCoordinates style="left: 8px;bottom: 10px;background: #011145e6;box-shadow: 0 0 9px 0 #042ea5 inset;z-index: 99;" />
  </div>
</template>

<script>
import PointerCoordinates from '@/components/geo-map/pointer-coordinates.vue'
import OperationPanel from '@/components/geo-map/operation-panel.vue'
import SearchStation from '../components/search-station.vue'
import StandardTabPanel from './components/tab-panel/standard-tab-panel.vue'
import CustomTabPanel from './components/tab-panel/custom-tab-panel.vue'
import AreaTabPanel from './components/tab-panel/area-tab-panel.vue'

import MapEventsMixins from '@/utils/mixins/map-events.mixins.js'
import MapMixins from '@/utils/mixins/map.mixins.js'

export default {
  name: 'RainStormCxqtq',
  mixins: [MapEventsMixins, MapMixins],
  components: {
    PointerCoordinates,
    OperationPanel,
    SearchStation,
    StandardTabPanel,
    CustomTabPanel,
    AreaTabPanel
  },
  data () {
    return {
      menus: [{ text: '重现期推求', value: '1' }],
      currentTab: 'standard',
      expand: true,
      legends: [
        { type: 'rect', color: '#e04545', fillColor: '224,69,69', layerId: 'dnpj', name: '暴雨多年平均值（H）', groupName: '业务图层', isClick: true },
        { type: 'rect', color: '#7019ff', fillColor: '112,25,255', layerId: 'bcxs', name: '暴雨变差系数（Cv）', groupName: '业务图层', isClick: true },
        { type: 'rect', visible: false, color: '#1cb55b', fillColor: '28,181,91', layerId: 'scyl', name: '历年实测雨量', groupName: '业务图层', isClick: true },
        { type: 'icon', visible: false, url: require('@/assets/images/map/legend/DD.png'), layerId: 'station_DD', name: '堰闸水文站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'icon', visible: false, url: require('@/assets/images/map/legend/PP.png'), layerId: 'station_PP', name: '雨量站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'icon', visible: false, url: require('@/assets/images/map/legend/ZQ.png'), layerId: 'station_ZQ', name: '河道水文站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'icon', visible: false, url: require('@/assets/images/map/legend/ZZ.png'), layerId: 'station_ZZ', name: '河道水位站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'icon', visible: false, url: require('@/assets/images/map/legend/RR.png'), layerId: 'station_RR', name: '水库水文站', groupName: '业务图层', isClick: true, needCluster: true },
        { type: 'icon', visible: false, url: require('@/assets/images/map/legend/QT.png'), layerId: 'station_QT', name: '其他测站', groupName: '业务图层', isClick: true, needCluster: true }
      ],
      metaSetMap: {
        dnpj: 'YSQJC_BYTJ_BYTJCG',
        bcxs: 'YSQJC_BYTJ_BYTJCG',
        scyl: 'YSQJC_BYTJ_BYTJCG',
        station_DD: 'YSQJC_ST_STBPRP_B_CB',
        station_PP: 'YSQJC_ST_STBPRP_B_CB',
        station_ZQ: 'YSQJC_ST_STBPRP_B_CB',
        station_ZZ: 'YSQJC_ST_STBPRP_B_CB',
        station_RR: 'YSQJC_ST_STBPRP_B_CB',
        station_QT: 'YSQJC_ST_STBPRP_B_CB'
      },
      methodCodeMap: {
        dnpj: 'select',
        bcxs: 'select',
        scyl: 'select',
        station_DD: 'getCZList',
        station_PP: 'getCZList',
        station_ZQ: 'getCZList',
        station_ZZ: 'getCZList',
        station_RR: 'getCZList',
        station_QT: 'getCZList'
      },
      methodParamsMap: {
        dnpj: { queryParam: { SJLX: '1', BZLSLX: '3' } },
        bcxs: { queryParam: { SJLX: '2', BZLSLX: '3' } },
        scyl: { queryParam: { SJLX: '3', BZLSLX: '3' } },
        station_DD: { CZXX: '', ZLMC: '堰闸水文站' },
        station_PP: { CZXX: '', ZLMC: '雨量站' },
        station_ZQ: { CZXX: '', ZLMC: '河道水文站' },
        station_ZZ: { CZXX: '', ZLMC: '河道水位站' },
        station_RR: { CZXX: '', ZLMC: '水库水文站' },
        station_QT: { CZXX: '', ZLMC: '其他站类' }
      },
      resultKey: {
        dnpj: 'KJDX',
        bcxs: 'KJDX',
        scyl: 'KJDX',
        station_DD: ['LGTD', 'LTTD'],
        station_PP: ['LGTD', 'LTTD'],
        station_ZQ: ['LGTD', 'LTTD'],
        station_ZZ: ['LGTD', 'LTTD'],
        station_RR: ['LGTD', 'LTTD'],
        station_QT: ['LGTD', 'LTTD']
      },
      searchLayers: ['dnpj', 'bcxs', 'scyl'],
      firstLoaded: []
    }
  },
  methods: {
    async initLayersAndMenus () {
      await this.createLayers()
      this.mapLoaded = true
      this.getMapData()
    },
    currentStageChange (value) {
      for (const key in this.methodParamsMap) {
        if (Object.hasOwnProperty.call(this.methodParamsMap, key)) {
          const element = this.methodParamsMap[key]
          if (key.startsWith('station_')) continue
          element.queryParam.BZLSLX = value
        }
      }
      if (this.mapLoaded) {
        this.getMapData()
      }
    },
    changeStateInStandard (value) {
      if (this.$refs.panel.currentStage === value) return
      this.$refs.panel.currentStage = value
    }
  },
  deactivated () {
    this.$mapManager.invoke('clearLayers')
    this.$mapManager.invoke('clearLayers', ['graphicLayer', 'showinglayer'])
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  height: 100%;
  display: flex;
  flex-direction: column;

  ::v-deep .el-tabs__header {
    margin: 0 10px 10px;
  }

  ::v-deep .el-tabs__content {
    flex: 1;
    overflow: hidden;

    .el-tab-pane {
      height: 100%;
    }
  }
}

.panel-position {
  z-index: 9;
  position: absolute;
  left: 10px;
  top: 10px;
}

.follower-top {
  position: absolute;
  left: -40px;
  top: 0;
  transform: translateX(-100%);
}

.follower-bottom {
  position: absolute;
  z-index: 99;
  left: -10px;
  bottom: 0;
  transform: translateX(-100%);
}
</style>
